<template>
<view class="community">
	<view class="head_bg">
	</view>
	<view class="operating_box" style="margin-top:-120rpx;padding-bottom:20rpx;">
		<view class="padding-left-sm padding-top-sm text-black text-df">{{info.residential_quarters_name}}</view>
		<view class="padding-left-sm padding-top-sm text-black text-df">{{info.residential_quarters_address}}</view>
		<view class="padding-left-sm padding-top-sm  text-black text-df">
			<text>终端地址：{{info.equipment_number}}</text>
		</view>
	</view>
	<view class="big_box" style="margin:60rpx 0;">
		<view class="guide_box margin-xl">
			<view class="padding-sm">故障类型：</view>
			<view class="cu-form-group">
				<picker @change="PickerChange" :value="index" :range="picker" range-key="name">
					<view class="picker">
						{{index>-1?picker[index].name:'请选择'}}
					</view>
				</picker>
			</view>
			<view class="margin-top-sm bgys text-center flex" v-if="isupload">
				<view class="align-center" style="margin:0 auto">
				  <image @tap="ChooseImage" src="../../../common/img/tianjia.png" style="width:200rpx;height: 200rpx;"></image>
				  <view class="text-grey">故障设备图片</view>
				</view>
			</view>	
			<view class="margin-top-sm text-center bg-img flex" v-else :style="[{ backgroundImage:'url(' +imgurl+ ')' }]" style="height:500rpx;">
				<view class="align-center" style="margin:0 auto">
				  <image @tap="ChooseImage" src="../../../common/img/tianjia.png" style="width:200rpx;height: 200rpx;"></image>
				  <view class="text-grey">故障设备图片</view>
				</view>
			</view>	
			<view class="padding-sm">拍摄故障图片，让我们更快的解决问题。</view>
			<view class="guide_box">
				<textarea class="feedback_box" @input="textareaAInput" value="" placeholder="添加备注信息" />			
			</view>
			<view style="height:150rpx;"></view>
		</view>
	</view>
	<view class="foot">
	   <button type="button" class="cu-btn block bg-blue lg" @tap="toF()">故障申报</button>
	</view>
</view>
</template>

<script>
	import { pathToBase64, base64ToPath } from '../../../components/js_sdk/gsq-image-tools/image-tools/index.js'
	export default {
		data() {
			return {
				info:'',//设备编号
				index:-1,
				src:'',
				isupload:true,
				imgurl:'',
				picker: [{index: '0',name: '二维码损坏'},
				         {index: '1',name: '插座损坏'},
						 {index: '2',name: '插座没电'},
						 {index: '3',name: '其他'}
					],
				cause_of_failure:''
			}
		},
		onLoad(options) {
			let info=JSON.parse(options.item);
			this.info=info;
		},
		methods: {
			PickerChange(e) {
				this.index = e.detail.value
			},
			textareaAInput(e) {
				this.cause_of_failure = e.detail.value
			},
			ChooseImage() {
				uni.chooseImage({
					count:1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: (res) => {
						console.log("res="+JSON.stringify(res));
						this.isupload=false;
						this.imgurl=res.tempFilePaths
						this.src = res.tempFilePaths;
						pathToBase64(this.src)
						  .then(base64 => {
							this.src = base64;
						  })
						  .catch(error => {
						    console.error(error)
						  })
					},
					fail() {
					}
				});
			},
			toF(){
				if(this.index==-1){
					uni.showToast({
						icon: 'none',
					    title: '故障类型不能为空'
					});
					return;
				}
				if(this.src==null || this.src==''){
					uni.showToast({
						icon: 'none',
					    title: '请上传设备图片'
					});
					return;
				}
				let that=this;
				that.http.tokenreq({
					url: 'user/v1/upfault',
					data: {
					   "base64":this.src,
					   "residential_quarters_guid":that.info.residential_quarters_guid,
					   "equipment_number":that.info.equipment_number,
					   "cause_of_failure":that.cause_of_failure,
					   "fault_type":that.index
					}
				}).then((res) => {
					let e=res.data;
					console.log("e="+JSON.stringify(e));
					if(e.code==0 && e.success){
						uni.showModal({
							content: e.message,
							showCancel:false,
							success: function (res) {
								if (res.confirm) {
									uni.navigateTo({
										url:'/pages/user/my/my'
									})
								}
							}
						});
					}else{
						uni.showToast({
							icon: 'none',
						    title: e.message
						});
					}
				})
			}
		}
	}
</script>

<style>
	.head_bg{
		height:150rpx;
	}
	.operating_box{
		padding-bottom:0px;
	}
	.bgys{
		   background-color:#E3EBFE;
		   height:400rpx;
	}
	.cu-form-group uni-picker .picker{
		text-align: left;
		padding: 8rpx;
		line-height:50rpx;
	}
	.cu-form-group uni-picker::after{
		line-height:50rpx;
	}	
	.cu-form-group{
		border: 1px solid gray;
		border-radius:10rpx;
		min-height:60rpx;
	}
	.foot{
		position: fixed;
		left: 0;
		bottom: 0;
		width:100%;
	}
	.feedback_box{
		width: 100%;
	}
</style>
